<template>
    <view class="main">
        <view class="message-box">
            <view v-if="!firstSetPwd" class="input-box">
                <text class="title">手机号：</text>
                <input type="number" v-model="tel" placeholder="请输入手机号" />
            </view>
            <view v-if="!firstSetPwd" class="input-box">
                <text class="title">短信验证码：</text>
                <input v-model="captcha" type="number" placeholder="请输入验证码" />
                <button @click="getCode" class="get-btn">{{ isGet ? "请等待" + time + "秒" : "获取验证码" }}</button>
            </view>
            <view class="input-box">
                <text class="title">新密码：</text>
                <input type="number" password="true" v-model="newPwd" placeholder="请输入新密码" />
            </view>
            <view class="input-box">
                <text class="title">确认密码：</text>
                <input type="number" password="true" v-model="againPwd" placeholder="请再次输入密码" />
            </view>
        </view>
        <view class="save-btn" @click="submit">保存</view>
    </view>
</template>

<script>
import { SendSmsNoVerifyCode, ResetPayPassword } from "@/service/api/member.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    data() {
        return {
            isGet: false,
            time: 60,
            tel: "",
            newPwd: "",
            againPwd: "",
            captcha: "",
            firstSetPwd: false,
        }
    },
    onLoad(e) {
        if (e) {
            this.firstSetPwd = e.firstSetPwd
        }
    },
    methods: {
        submit() {
            if (!this.tel & !this.firstSetPwd) {
                this.easyToast("请输入手机号")
            } else if (!this.captcha & !this.firstSetPwd) {
                this.easyToast("请输入验证码")
            } else if (!this.newPwd) {
                this.easyToast("请输入新密码")
            } else if (!this.againPwd) {
                this.easyToast("请输入确认密码")
            } else if (this.newPwd != this.againPwd) {
                this.easyToast("输入的密码不一致")
            } else {
                let param = {
                    tel: this.tel,
                    validCode: this.captcha,
                    validType: 8,
                    password: this.newPwd,
                }
                ResetPayPassword(param).then((res) => {
                    if (res.State == 1) {
                        let pages = getCurrentPages() //当前页
                        let beforePage = pages[pages.length - 2] //上个页面
                        // #ifdef H5
                        beforePage.closePop()
                        // #endif
                        // #ifndef H5
                        beforePage.$vm.closePop()
                        // #endif
                        wx.hideKeyboard()
                        this.easyGoBack()
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
        getCode() {
            let tel = storage.getCache("userInfo").Tel
            if (this.tel == "" || !this.tel) {
                this.easyToast("请输入手机号")
            } else if (this.tel != tel) {
                this.easyToast("请输入正确的手机号")
            } else {
                this.isGet = true
                this.countDown()
            }
        },
        countDown() {
            if (this.time == 60) {
                let path = "?tel=" + this.tel + "&validType=8"
                SendSmsNoVerifyCode(path).then((res) => {})
                let t = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
                    } else {
                        this.isGet = false
                        clearInterval(t)
                        this.time = 60
                    }
                }, 1000)
            } else {
                this.easyToast("请等待" + this.time + "秒后再次点击")
            }
        },
    },
}
</script>

<style lang="scss">
.main {
    display: flex;
    flex-direction: column;
}

.message-box {
    background-color: $color-white;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
}

.input-box {
    display: flex;
    align-items: center;
    border-bottom: 1px solid $color-gray-4;

    .title {
        width: 168rpx;
        font-size: 28rpx;
        margin: 20rpx;
    }

    input {
        font-size: 28rpx;
        flex: 1;
    }

    .get-btn {
        width: 160rpx;
        font-size: 24rpx;
        background-color: $color-white;
        border-radius: 50rpx;
        border: 1px solid #ff0000;
        color: #ff0000;
        padding: 15rpx 15rpx;
        line-height: 24rpx;
    }
}

.save-btn {
    align-self: center;
    background-color: #ff547c;
    color: #ffffff;
    width: 94vw;
    padding: 20rpx 0;
    text-align: center;
    margin-top: 40rpx;
}
</style>
